{% extends 'layout/user_basic.html' %}
{% load static %}
{% block css %}
    <style>
    @font-face {
    font-family: 'MyFont';
    src: url("{% static "font/Font1.ttf" %}") format('truetype');
    }
        body {
            background-image: url('{% static 'pics/comments_background3.png' %}');
            background-color: #ffcc00;
            color: #361f0e;
            font-family: Arial, sans-serif;
            font-size: 16px;
            background-size:100% 100%; /* 使背景图片充满整个屏幕 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-attachment: fixed;
        }
        .this_content{
            font-size:16px;
            font-family:'MyFont', Arial, sans-serif ;
            text-align: center;
            color:#502314;
        }
        .comment-container {
            width: 60%;
            margin: 20px auto;
            padding: 20px;
            background-color: #f5ebdc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
        }
        .comment-container h1 {
        font-family: 'MyFont', Arial, sans-serif;
        font-size: 40px;
        margin-bottom: 20px;
        color: hsl(30deg 82% 43%);
        text-align: center;
        }

        .comment-container h2 {
            font-family: 'MyFont', Arial, sans-serif;
            font-size: 40px;
            margin-bottom: 20px;
            color: hsl(30deg 82% 43%);
            text-align: center;
        }

        .comment {
            margin-bottom: 10px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fafafa;
            position: relative;
        }

        .comment p {
            margin: 0;
        }

        .delete-button {
            background-color: #e74c3c;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 5px;
            right: 5px;
        }

        #input-container {
            margin-top: 20px;
            text-align: center;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

        input[type="text"] {
            width: 60%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        button {
            background-color: hsl(30deg 82% 43%);
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: hsl(30deg 82% 43%);
        }
    </style>
{% endblock %}

{% block content %}
    <div class="comment-container">
        <h1>欢迎用户：{{ user.username}}的真实评价！</h1>
        <div class="this_content">订单内容：{{ my_order.content }}</div>
        <div id="input-container">
            <input type="text" id="userInput" placeholder="请输入评论" maxlength="200" oninput="updateCharacterCount()"/>
            <span id="charCount">0/200</span>
            <button onclick="postComment()">发表评论</button>
        </div>
        <h2>我的评论</h2>
        <div id="commentList">

            <!-- 这里将显示用户的评论 -->
            {% for i in comment_list %}
                <div class="comment" id="comment{{ i.id }}">{{ i.text }}
                    <button class="delete-button" onclick="deleteComment('{{ i.id }}')">删除</button>
                </div>
            {% endfor %}
        </div>
        <!-- 查看所有评价按钮 -->
            <button onclick="navigateToAnotherPage()">查看所有评论</button>
        </div>
{% endblock %}
{% block js %}
    <script>
        function postComment() {
            var userInput = document.getElementById("userInput").value;
            if (userInput.trim() === "") {
                alert("请勿发送空白评论！");
                return;
            }

            var commentList = document.getElementById("commentList");
            var commentElement = document.createElement("div");
            var commentId = Date.now();  // 使用时间戳生成唯一的id
            commentElement.id = "comment" + commentId;
            commentElement.className = "comment";
            commentElement.textContent = userInput;

            var paragraph = document.createElement("p");
            paragraph.textContent = userInput;
            commentElement.appendChild(paragraph);

            var deleteButton = document.createElement("button");
            deleteButton.className = "delete-button";
            deleteButton.textContent = "删除";
            deleteButton.onclick = function () {
                deleteComment(commentId)
            };
            commentElement.appendChild(deleteButton);
            commentList.appendChild(commentElement);
            submitCommentToBackend(userInput);
            document.getElementById("userInput").value = "";
            updateCharacterCount();
        }
        function deleteComment(commentId) {
            var deleteUrl = "{% url 'delete_comment' comment_id=0%}"
            var commentElement = document.getElementById("comment" + commentId);
            if (commentElement) {
                // 在这里添加从后端删除评论的逻辑
                fetch(deleteUrl.replace('0', commentId), { method: 'DELETE' })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 如果后端删除成功，再删除前端的评论显示
                    commentElement.parentNode.removeChild(commentElement);
                } else {
                    // 处理错误情况，例如评论不存在或服务器错误
                    alert(data.message);
                }
            })
            .catch(error => {
                // 处理网络或其他错误
                console.error('Error:', error);
            });
            }
        }
        function updateCharacterCount() {
        var userInput = document.getElementById("userInput").value;
        var charCount = document.getElementById("charCount");
        charCount.textContent = userInput.length + "/200";
        }
        function navigateToAnotherPage() {
            window.location.href = "{% url 'total_comments' %}";
        }
        function submitCommentToBackend(comment) {
        // 创建一个对象，包含要发送的数据
            var data = {
                user_id: 0,
                user_name: '',
                order_id:0,
                comment: comment,
                content: '',
                total_price:0,
                l_comment:'',
            };

    // 发送Ajax请求
            $.ajax({
                type: "POST",
                url: "{% url 'post_comment' %}",  // 替换为实际处理评论提交的后端URL
                data: data,
                success: function(response) {
                    console.log(response);
                    location.reload();
                },
                error: function(error) {
                    console.error(error);
                }
                });
        }


    </script>
{% endblock %}


